$(function () {

    //导航移入移出事件
    $(".main0 p").on("mouseenter", function () {
        $(this).css("backgroundColor", "red")
    })
    $(".main0 p").on("mouseleave", function () {
        $(this).css("backgroundColor", "")
    })




    //商品分类移入移出事件
    $(".main1-1 p").on("mouseenter", function () {
        $(this).css("background", "rgb(80, 80, 80)")
        $(".main1-4-1").eq($(this).index()).css("display", "block")
        $(".main1-4").css("display", "block")
    })
    $(".main1-1 p").on("mouseleave", function () {
        $(this).css("background", "")
        $(".main1-4-1").eq($(this).index()).css("display", "none")
        $(".main1-4").css("display", "none")
    })

    //大的商品分类
    $(".main1-4-1").on("mouseenter", function () {
        $(this).css("display", "block")
        $(".main1-4").css("display", "block")
    })
    $(".main1-4-1").on("mouseleave", function () {
        $(this).css("display", "none")
        $(".main1-4").css("display", "none")
    })

    //导航显示商品分类
    $(".main0 div,.main1").on("mouseenter", function () {
        $(".main1").css("display", "block")
    }).on("mouseleave", function () {
        $(".main1").css("display", "none")
    })

    $(".main1").on("mouseleave", function () {
        $(".main1").css("display", "none")
    })
    // $(".main0 div").on("mouseenter", function () {
    //     $(".main1").css("display","block")
    // }).on("mouseleave", function () {
    //     $(".main1").css("display","none")
    // })



    //放大镜专用JS
    $.fn.magnifying = function () {
        var that = $(this),
            $imgCon = that.find('.con-fangDaIMg')          //正常图片容器    450px                小区域
        $Img = $imgCon.find('img')                      //正常图片，还有放大图片集合   450px   小图
        $Drag = that.find('.magnifyingBegin')          //拖动滑动容器   150px
        $show = that.find('.magnifyingShow')          //放大镜显示区域  450px                 大区域
        $showIMg = $show.find('img')                    //放大镜图片   800px                  大图
        $ImgList = that.find('.con-FangDa-ImgList > li >img');



        $imgCon.mousemove(function (e) {
            $Drag.css('display', 'block');
            $show.css('display', 'block');

            //需要改变小区域的大小,比例才对的上
            $Drag.css("width", ($Img.width() / $showIMg.width()) * $show.width())        //小区域=小图/大图*大区域
            $Drag.css("height", ($Img.height() / $showIMg.height()) * $show.height())

            //获取坐标的两种方法
            //    var  multiple =  1.15;  

            var multiple = $show.width() / $Drag.width()

            var iX = e.pageX - $(this).offset().left - $Drag.width() / 2,       //鼠标在小区域的正中心   鼠标位置-小图距离页面的位置-小区域的一半
                iY = e.pageY - $(this).offset().top - $Drag.height() / 2,
                MaxX = $imgCon.width() - $Drag.width(),                        //控制滑动块最大的位置
                MaxY = $imgCon.height() - $Drag.height();

            console.log($show.width(), $Drag.width())

            // console.log(e.pageX,$(this).offset(),$Drag.width())


            //这一部分可代替下面部分，判断最大最小值

            iX = iX > 0 ? iX : 0;
            iX = iX < MaxX ? iX : MaxX;
            iY = iY > 0 ? iY : 0;
            iY = iY < MaxY ? iY : MaxY;
            $Drag.css({ left: iX + 'px', top: iY + 'px' });       //滑动块移动

            //大区域移动的时候,大区域的宽高变化,比例*鼠标位置*-1
            $showIMg.css({ position: "absolute", left: multiple * iX * -1 + 'px', top: multiple * iY * -1 + 'px' });
            //return false;
        });
        $imgCon.mouseout(function () {
            $Drag.css('display', 'none');
            $show.css('display', 'none');
        });

        $ImgList.click(function () {
            var NowSrc = $(this).data('bigimg');
            $Img.attr('src', NowSrc);
            $(this).parent().addClass('active').siblings().removeClass('active');
        });
    }
    $(".main3-1").magnifying();

    //点收藏按钮
    $(".main-SC").on("click", () => {
        layer.msg('点你马的收藏,没用!');      //这是是弹窗风格插件
    })





    //商品加购按钮
    $n = 1
    $(".main-JIA").on("click", function () {
        $n++
        $(".main-SHU")[0].innerText = $n
        $(".main-JIAN").css("background", "#fff")
    })
    $(".main-JIAN").on("click", function () {
        $n--

        if ($n <= 1) {
            $(".main-JIAN").css("background", "#cfcfcf")
            $n = 1
        }
        $(".main-SHU")[0].innerText = $n
    })


    //页面加载就得到id,再把id发送到后台,得到对应的数据,再填充到页面上去
    var pid = location.search.split("?")[1].split("=")[1]    //通过get请求传的数据,拿到访问页面对应的id

    $.get(`http://www.anyu.org.cn:8081/api/goods/${pid}`).then((res) => {    //根据id,设置到对应的接口,拿到json文件里面对应id的信息
        // console.log(res)
        //把服务器得到的数据藏起来,方便后面加购时使用
        $(".main-JG")[0].dataInfo = res[0]


        //通过拿到的res对象,把内容都填入进去
        $("#img0").attr("src", res[0].p_img[0])
        $("#img1").attr("src", res[0].p_img[0]).attr("data-bigimg", res[0].p_img[0])
        $("#img2").attr("src", res[0].p_img[1]).attr("data-bigimg", res[0].p_img[1])
        $("#img3").attr("src", res[0].p_img[2]).attr("data-bigimg", res[0].p_img[2])
        $("#img4").attr("src", res[0].p_img[3]).attr("data-bigimg", res[0].p_img[3])
        $("#img5").attr("src", res[0].p_img[4]).attr("data-bigimg", res[0].p_img[4])


        $("#bh")[0].innerText = res[0].p_id
        $("#mc")[0].innerText = res[0].p_name
        $("#jg")[0].innerText = res[0].p_price

    })

    $(".main-JG").on("click", function () {
        if (JSON.parse(localStorage.getItem("users")) != null) {


            var saveObj = $(this)[0].dataInfo        //得到上面藏进去的数据
            //删除一些不要的数据   留下名字,价格,第一张图

            delete (saveObj.p_img)
            saveObj.p_num = $(".main-SHU").text()
            //加入当前登录者的id
            saveObj.u_id = JSON.parse(localStorage.getItem("users")).u_id


            //链接ajax  让商品信息加入到数据库
            $.ajax({
                url: "./api/addcart1",
                type: "post",
                data: saveObj
            }).then(function (res) {
                // console.log(res)
                if (res.status == 1) {
                    layer.msg('加购成功!');      //这是是弹窗风格插件
                }
                if (res.status == 2) {
                    layer.msg('购物车商品更新成功!');      //这是是弹窗风格插件
                }

            })

            setTimeout(()=>{
                window.location="addcart.html"
            },1000)

        } else {
            layer.msg('你个憨憨忘记登陆了!');
        }





        // console.log(saveObj)
    })


    // $(".main-JIAN").on("click", function () {
    //     var num = $(this).next(".main-SHU").val()

    // })



})